<template>
	<view class="viewWidth ">
		<template v-if='loading'>
			<view v-for="(item,index) in 5" :key="index">
				<view class=" Skeleton" style="height: 30rpx;" />
				<view class="activeContent" style="border: none;">
					<view>
						<album :loading='loading' />
					</view>
					<view class=" Skeleton" style="height: 30rpx;margin-top: 20rpx;" />
				</view>
			</view>
		</template>
		<template v-else>
			<view class="activeBox" v-for="(item,index) in data" :key="index">
				<template v-if="item.type!='Conquer'">
					<view class="created_at">
						<u-avatar mode='aspectFill' :src='item.user.avatar' size='80rpx' />
						<view style="margin:0 10rpx;flex: 1;">{{item.user.nick_name}}</view>
						<view>{{formatFun(item.created_at)}}</view>
					</view>
					<view class="activeContent">
						<view class="content">
							<view>
								<album :ref='`album${index}`' :imageList='item.images'
									:video='item.videos.map(imageItem=>imageItem.url)' :index='index'
									:playIndex='playIndex' />
							</view>
							<view style="margin: 10rpx 0;">
								{{item.title}}
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="created_at">
						<u-avatar mode='aspectFill' :src='item.user.avatar' size='80rpx' />
						<view style="margin:0 10rpx;flex: 1;">{{item.user.nick_name}}</view>
						<view>{{formatFun(item.created_at)}}</view>
					</view>
					<view class="activeContent">
						<view class="content">
							<view>
								<album :ref='`album${index}`' :imageList='[{url:item.thumb}]' :video='[]' :index='index'
									:playIndex='playIndex' />
							</view>
							<view style="margin: 10rpx 0;">
								{{item.title}}
							</view>
						</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		format
	} from "timeago.js";
	import album from '@/components/album.vue';
	export default {
		props:['data',"loading"],
		components: {
			album,
		},
		mounted() {
		},
		methods: {
			formatFun(item) {
				return format(item, "zh_CN")
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.access {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		margin-right: 20rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.created_at {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-right: 40rpx;


	}

	.body {
		padding: 20rpx 0 0;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.activeContent {
		padding: 0 0 0 35rpx;
		margin: 10rpx 0 10rpx 35rpx;
		border-left: 1rpx dashed #bbb;

		>.content {
			box-shadow: 0 0 10rpx #ddd;
			margin-right: 20rpx;
			padding: 20rpx;
			border-radius: 8rpx;
			background-color: #fff;
		}
	}



	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx 0;

		>view:nth-child(2) {
			flex: 0.98;
		}
	}
</style>